<template>
	<view class="content">
		<view class="title" :style="{'margin-top':196+'rpx'}"></view>
		<!-- <image src="../../static/txt1.png" mode="widthFix" class="pic1 animated headShake" v-if="biaodanShow && language=='zh'"></image> -->
		<view class="biaodan-box animated bounceInUp" v-if="biaodanShow">
			<view class="biaodan-con">
				<!-- <text class="xingming">{{language=='zh'?'Name':'姓名'}}</text> -->
				<input type="text" v-model.trim="model.name" class="shurukuang" :placeholder="language=='zh'?'姓名':'Name'" placeholder-class="plac"/>
			</view>
			<view class="biaodan-con">
				<!-- <text class="xingming" >{{language=='zh'?'手机号':'Phone number'}}</text> -->
				<input type="number" v-model.trim="model.tel"  class="shurukuang" placeholder-class="plac" :placeholder="language=='zh'?'手机号':'Phone number'"/>
			</view>
			<view class="biaodan-con">
				<input type="text" v-model.trim="model.wwid" class="shurukuang" placeholder-class="plac" :placeholder="language=='zh'?'WWID':'WWID'"/>
			</view>
			<view class="biaodan-con">
				<!-- <text class="xingming">{{language=='zh'?'收件地址':'Address'}}</text> -->
				<input type="text" v-model.trim="model.address" class="shurukuang" placeholder-class="plac" :placeholder="language=='zh'?'收件地址':'Address'"/>
			</view>
			<view class="biaodan-con">
				<!-- <text class="xingming">{{language=='zh'?'报名类型':'Register type'}}</text> -->
				
				<picker mode="selector"  :range="language=='zh'?xialaarr:xialaarr1" @change="xiala" class="pickeroo">
					<input type="text" v-model.trim="model.type" class="shurukuang" placeholder-class="plac" disabled :placeholder="language=='zh'?'报名类型':'Register type'"/>
				</picker>
			</view>
			
			<!-- <view class="biaodan-con">
				<text class="xingming">{{language=='zh'?'邮箱':'E-mail'}}</text>
				<input type="text" v-model.trim="model.email" class="shurukuang" placeholder-class="plac" :placeholder="language=='zh'?'邮箱':'E-mail'"/>
			</view>
			<view class="biaodan-con">
				<text class="xingming">{{language=='zh'?'部门':'E-mail'}}</text>
				<input type="text" v-model.trim="model.bumen" class="shurukuang" placeholder-class="plac" :placeholder="language=='zh'?'部门':'E-mail'"/>
			</view> -->
			
			
			
			<view class="tijiaobaoming" @click="tijiao">
				{{language=='zh'?'提交报名':'Submit'}}
			</view>
		</view>
		<view class="tishiyu" v-else>
			<view class="chenggongtishi animated headShake" v-if="language=='zh'">
				恭喜您已报名成功<br>
				期待您的加入
			</view>
			<view class="chenggongtishi animated headShake" v-else>
				Well done<br>
				See you soon
			</view>
			<view class="fanhuibtn animated bounceInUp" @click="fanhui" v-if="language=='zh'"></view>
			<view class="fanhuibtn-en animated bounceInUp" @click="fanhui" v-else></view>
		</view>
		<!-- <view class="zhongxin animated fadeIn"></view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model:{
					name:'',
					wwid:'',
					tel:'',
					address:'',
					type:'',
				},
				language:'',
				biaodanShow:true,
				xialaarr:['ADA会员','ADA大使-内容方向','ADA大使-宣发方向','ADA大使-战略方向'],
				xialaarr1:[
					'ADA Member','ADA Ambassador-Content','ADA Ambassador-Communication','ADA Ambassador-Strategy'
				]
			}
		},
		onShow() {
			this.language = uni.getStorageSync('duoyuyan')
			console.log('当前页面语言类型：',this.language)
			this.getUserInfo()
		},
		methods: {
			getUserInfo(){
				let openid = uni.getStorageSync('openID')
				if (!openid) {
					uni.showModal({
						content:'授权数据缺失，请重新登录尝试',
						showCancel:false,
						success: (res) => {
							if (res.confirm) {
								uni.redirectTo({
									url:'../index/index'
								})
							} 
						}
					})
				}
			},
			
			tijiao(){
				this.duoyuyan = 'en'
				// this.biaodanShow = false
				uni.showLoading({
					title:'正在提交',
					mask:true
				})
				console.log(this.model)
				if (this.model.name && this.model.wwid &&this.model.tel && this.model.address && this.model.type) {
					if(!(/^1[3-9][0-9]{9}$/.test(this.model.tel))){ 
					        uni.showToast({
					        	title:'请输入正确手机号!',
					        	icon:'none',
					        	mask:true
					        })
					        return false; 
					    } else{
								//提交表单
								let openid = uni.getStorageSync('openID')
								uniCloud.callFunction({
									name:'saveForm',
									data:Object.assign({openid:openid},this.model)
								}).then((res)=>{
									uni.hideLoading()
									console.log(res)
									if (res.result.success) {
										//提交成功
										this.biaodanShow = false
									} else{
										//提交失败
										uni.showToast({
											title:res.result.msg,
											icon:'none',
											mask:true
										})
									}
								})
							}
				} else{
					uni.hideLoading()
					uni.showToast({
						title:'请完整填写表单',
						icon:'none',
						mask:true
					})
				}
			},
			fanhui(){
				uni.navigateTo({
					url:'../home/home?current=3'
				})
			},
			xiala(e){
				console.log(e.detail.value)
				if (this.language == 'zh') {
					this.model.type = this.xialaarr[e.detail.value]
				} else{
					this.model.type = this.xialaarr1[e.detail.value]
				}
				
			}
		}
	}
</script>

<style scoped>
	page{
		background: url(../../static/bg1.png) no-repeat center top !important;
		background-size: 100% auto !important;
	}
.pic1{
	width: 316rpx;
	height: 34rpx;
	margin-top: 45rpx;
}
.biaodan-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 35rpx;
	animation-delay: 0.3s;
}
.biaodan-con{
	width: 500rpx;
	height: 74rpx;
	border: 1px solid #ef8289;
	border-radius: 6rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18rpx;
	/* background: #fff; */
}
.xingming{margin-left: 22rpx;width: 120rpx;font-size: 28rpx;color: #e3202d;}
.shurukuang{flex: 1;line-height: 74rpx;font-size: 28rpx;color: #e3202d;padding-left: 10rpx;}
.plac{flex: 1;line-height: 74rpx;font-size: 28rpx;color: #e3202d;}
.shurukuang1{line-height: 74rpx;font-size: 28rpx;color: #e3202d;width: 90%;}
.tijiaobaoming{
	width: 500rpx;
	height: 74rpx;
	background: linear-gradient(90deg,#ff3c5f,#ff5a17,#2b50f9);
	border-radius: 6rpx;
	line-height: 74rpx;
	text-align: center;
	font-size: 36rpx;
	color: #fff;
	font-weight: bold;
	letter-spacing: 1px;
}
.zhongxin{
	width: 750rpx;
	height: 394rpx;
	background: url(../../static/zhongxin.png) no-repeat center center;
	background-size: 100% 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	animation-delay: 0.8s;
}
.chenggongtishi{
	width: 576rpx;
	height: 150rpx;
	background: linear-gradient(90deg,#ff3c5f,#ff5a17,#2b50f9);
	border-radius: 6rpx;
	/* line-height: 130rpx; */
	text-align: center;
	font-size: 36rpx;
	color: #fff;
	/* font-weight: bold; */
	letter-spacing: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 124rpx;
}
.fanhuibtn{
	width: 204rpx;
	height: 204rpx;
	background: url(../../static/btn-fanhui.png) no-repeat center center;
	background-size: 100% 100%;
	margin-top: 126rpx;
}
.fanhuibtn-en{
	width: 190rpx;
	height: 192rpx;
	background: url(../../static/btn-fanhui-en.png) no-repeat center center;
	background-size: 100% 100%;
	margin-top: 124rpx;
}
.tishiyu{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.pickeroo{
	width: 100%;
}
</style>
